<!DOCTYPE html>
<html ng-app="JSONApp">
    <head>
        <style>
            .dim {
                color: #888;
            }
            .code {
                font-family: monospace;
            }
            table {
                margin-left: auto;
                margin-right: auto;
            }
            table, tr, th, td {
                border-collapse: collapse;
                border: 1px dotted #EEE;
                padding: 4px;
            }
            tr {
                vertical-align: top;
            }
        </style>
    </head>
    <body>
        <div >
            <div ng-controller="JSONController">
                <table>
                    <!-- <tr>
                        <td colspan="2">
                <span class="dim code" ng:non-bindable>{{person}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <pre>{{person|json}}</pre>
                        </td>
                    </tr> -->
                    <tr>
                        <td>
                <span class="dim code" ng:non-bindable>&lt;editproperty object=&quot;person&quot;&gt;&lt;/editproperty&gt;</span>
                        </td>
                        <td>
                <span class="dim code" ng:non-bindable>&lt;editobjectproperty object=&quot;person&quot;&gt;&lt;/editobjectproperty&gt;</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                <editproperty object="person"></editproperty>
                        </td>
                        <td>
                <editobjectproperty object="person"></editobjectproperty>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <script src="angular-1.1.0.min.js"></script>
        <script src="JSON.js"></script>
        <script src="JSONApp.js"></script>
    </body>
</html>